*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(243, 244, 245);
}
.top{
    img{
        width: 100%;
        height: auto;
    }
}
.container{
    .container-title{
        font-size: .7rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 2.8rem;
        color: rgb(34, 34, 34);
        .today, .tomorrow{
            text-align: center;
            flex: 1;
            display: inline-block;
        }
        .active{
            font-size: .8rem;
            color: rgb(240, 56, 103);
            font-weight: 700;
            span{
                display: inline-block;
                // overflow: hidden;
                height: 100%;
                i{
                    position: relative;
                    top: .3rem;
                    display: block;
                    width: 100%;
                    height: .15rem;
                    background-color: #f03867;
                }
            }  
        }
    }
    .todayList , .tomorrowList{
        display: none;
    }
    .lowPrice{
        width: 100%;
        position: relative;
        img{
            width: 100%;
        }
        ul{
            position: absolute;
            left: .8rem;
            bottom: .5rem;
            li{
                font-size: .75rem;
                display: inline-block;
                width: 4rem;
                color: rgb(240, 57, 103);
                font-weight: bold;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                background-color: rgb(255, 255, 255);
                border-radius: .1rem;
                img{
                    margin-bottom: .2rem;
                }
            }
        }
    }
    .newProducts{
        .newTitle{
            text-align: center;
            padding: .3rem 0;
            .titleText{
                font-size: .8rem;
                margin: 0 .2rem;
            }
            .titleIcon{
                position: relative;
                width: 1rem;
                height: 1rem;
                transform: rotate(311deg);
                display: inline-block;
            }
            .titleIcon::before{
                display: block;
                content: '';
                position: absolute;
                width: 0.5rem;
                height: 0.3rem;
                border-radius: 0.5rem;
                top: 0;
                left: 0.07999999999999999rem;
                background: #C31922;
            }
            .titleIcon::after{
                display: block;
                content: '';
                position: absolute;
                width: 1rem;
                height: .5rem;
                border-radius: 0.5rem;
                bottom: -0.026666666666666665rem;
                left: 0;
                background: #FD2869;
            }
        }
        .newContainer{
            padding: 0 .5rem;
            .newList{
                margin-top: 1rem;
                border-radius: .5rem;
                background: #fff;
                img{
                    width: 100%;
                }
                &>img{
                    border-radius: .5rem .5rem 0 0;
                }
                p{
                    height: 1rem;
                    line-height: 1rem;
                    box-sizing: border-box;
                }
                ul{
                    display: flex;
                    justify-content: space-between;
                    padding: .75rem;
                    li{
                        display: inline-block;
                        width: 5rem;
                        .money{
                            white-space: nowrap;
                            overflow: hidden;
                            .icon-qianqian-{
                                display: inline-block;
                                transform: scale(.8);
                                margin-left: -.1rem;
                            }
                            span:nth-of-type(1){
                                font-size: .75rem;
                                display: inline-block;
                                transform: scale(.8);
                                margin-left: -.5rem;
                            }
                            span:nth-of-type(2){
                                position: relative;
                                background: #f03867;
                                height: .6rem;
                                line-height: .6rem;
                                display: inline-block;
                                font-size: .6rem;
                                color: #fff;
                            }
                            span:nth-of-type(3){
                                font-size: .6rem;
                                text-decoration: line-through;
                                color: #98989f;
                                font-weight: 400;
                                transform: scale(.8);
                                display: inline-block;
                                margin-left: -.2rem;
                            }
                            .triangle::before{
                                content: "";
                                position: absolute;
                                width: 0.3rem;
                                height: 0.6rem;
                                top: 0;
                                left: -.3rem;
                                background: url("https://h2.appsimg.com/b.appsimg.com/upload/mst/2021/07/28/1/0d184032954257dc1f6fef98640fb609.png") 0 0 no-repeat;
                                background-size: cover;
                            }
                        }
                        .discount{
                            white-space: nowrap;
                            overflow: hidden;
                            .red{
                                color: #f03867;
                                border: 0.026666666666666665rem solid #f03867;
                                white-space: nowrap;
                                box-sizing: content-box;
                                font-size: .5rem;
                                border-radius: .1rem;
                                padding: 0 .1rem;
                                transform: scale(0.75);
                                display: inline-block;
                                margin-left: -.1rem;
                            }
                            .green{
                                color: #32b444;
                                border: 0.026666666666666665rem solid #32b444;
                                white-space: nowrap;
                                box-sizing: content-box;
                                font-size: .5rem;
                                border-radius: .1rem;
                                padding: 0 .1rem;
                                transform: scale(0.75);
                                display: inline-block;
                                margin-left: -.7rem;
                            }
                            .red, .green{
                                position: relative;
                                top: -.1rem;
                            }
                        }
                    }
                }
            }
        }
    }
    .notice{
        width: 100%;
        padding: 0 .5rem;
        box-sizing: border-box;
        .noticeLlist{
            position: relative;
            width: 100%;
            height: 7.2rem;    
            margin-bottom: .5rem;    
            &>img{
                width: 100%;
                height: 100%;
                border-radius: .3rem;
                filter: brightness(80%);
            }
            .noticeLogo{
                position: absolute;
                top: 0;
                left: 0;
                height: 4.8rem;
                width: 100%;
                text-align: center;
                img{
                    width: 4.5rem;
                    height: 2.25rem;
                    margin: 1rem auto .5rem;
                }
                .noticeDiscount{
                    min-width: 3rem;
                    max-width: 5rem;
                    height: 1rem;
                    padding: 0 0.1rem;
                    border: 1px solid #fff;
                    color: #fff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                    line-height: 1rem;
                    box-sizing: border-box;
                    font-size: .3rem;
                    border-radius: .5rem;
                    margin: auto;
                }
            }
            .noticeTimeBtn{
                text-align: center;
                margin: auto;
                width: 100%;
                position: absolute;
                bottom: .8rem;
                height: 1rem;
                line-height: 1rem;
                font-size: .6rem;
                color: #fff;
                div{
                    display: inline-block;
                }
                .date{
                    font-size: .65rem;
                }
                .time{
                    background-color: #2e2c2c;
                }
                .btn{
                    background-color: #000;
                    padding: 0 .5rem;
                    border-radius: .5rem;
                }
                .btn:after{
                    content: "";
                    display: inline-block;
                    margin-left: 0.2rem;
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #fff url("https://h2.appsimg.com/b.appsimg.com/upload/mst/2021/09/18/164/c59275e5f1296d6b14efff2578bad7ce.png") 0.12rem/0.23rem no-repeat;
                    border-radius: .3rem;
                }
            }
        }
    }
}
@media screen and (min-width:768px) {
    .top, .container{
        width: 632px;
        margin: auto;
    }
    .container .lowPrice ul li{
        width: 3.3rem;
    }
    .container .newProducts .newContainer .newList ul{
        padding: .5rem.3rem;
    }
    .container .newProducts .newContainer .newList ul li{
        width: 4.5rem;
    }
    .container .newProducts .newContainer .newList ul li .discount .green{
        margin-left: -.5rem;
    }
    // .red, .green {
    //     position: relative;
    //     top: -.1rem;
    // }
}